<template>
  <div>
    <van-index-bar :index-list="indexList">
      <div v-for='item, ind in cities' :key='ind'>
        <van-index-anchor :index="item.letter" />
          <van-cell v-for="city,index in item.cities" :key='index' :title="city" />
      </div>
    </van-index-bar>
  </div>
</template>

<style scoped></style>

<script>
import Vue from 'vue';
import { Cell, IndexBar, IndexAnchor } from 'vant';
import axios from '../utils/axiosMaiZuo';

Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);

export default {
  // components: { IndexBar, IndexAnchor },
  data() {
    return {
      linux: 'linux',
      cities: [],
      indexList: []
    };
  },
  mounted() {
    axios({
      url: '/gateway?k=7223117',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16198591965838634376757249","bc":"110100"}',
        'X-Host': 'mall.film-ticket.city.list',
      },
    }).then((res) => {
      var letters = [];
      var a = 65;
      for (a = 65; a < 91; a++) {
        letters.push(String.fromCharCode(a));
      }
      // console.log(res.data);
      // console.log(res.data.data.cities);
      letters.forEach((letter) => {
        var newCities = [];
        res.data.data.cities.forEach((item) => {
          if (item.pinyin.slice(0, 1).toUpperCase() === letter) {
            newCities.push(item.name);
          }
        });
        if (newCities.length != 0) {
          this.indexList.push(letter)
          this.cities.push({
            "letter": letter,
            "cities": newCities,
          });
        }
      });
      console.log(this.indexList)
    });
  },
};
</script>
